<template>
	<view class="list-container">
		<view id="wf-list" class="list" v-for="(list,listIndex) of viewList" :key="listIndex">
			<view class="item" v-for="(item,index) of list.list" :key="index" @click="handler">
				<view class="post_r">
					<image @load="handleViewRender(listIndex,index)" @error="handleViewRender(listIndex,index)" lazy-load :src="item.url" mode="widthFix"></image>
					<view class="post_a">{{item.title}}</view>
					<view class="post_a_top" :class="item.end?'end':'start'">{{item.end?'已结束':'进行中'}}</view>
				</view>
				<view class="desc">{{item.title}}</view>
			</view>
		</view>
<!-- 		<view class="none_img"  v-show="viewList[0].length==0">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/zw.png" mode="widthFix"></image>
		</view> -->
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array, //实际请求获取的列表数据
			}
		},
		data() {
			return {
				viewList:[{list:[]},{list:[]}],  //展示到视图的列表数据
				everyNum:2
			}
		},
		methods: {
			init(){
				this.viewList = [{list:[]},{list:[]}];
				setTimeout(()=>{
						this.handleViewRender(0,0)
				},0)
			},
			handleViewRender(x,y){
				const index = this.viewList.reduce((total,current)=>total + current.list.length,0)
				if(index>this.list.length-1) {
						// 加载完成触发事件并返回加载过的图片数
						this.$emit('finishLoad',index)
						return
				};
				const query = uni.createSelectorQuery().in(this);
				let listFlag = 0;
				query.selectAll('#wf-list').boundingClientRect(data => {
						listFlag = data[0].bottom - data[1].bottom<=0?0:1;
						this.viewList[listFlag].list.push(this.list[index])
				}).exec()
			},
			handler(){
				this.$emit('selected')
			}
		},
		mounted() {
				if(this.list.length){
						this.init()
				}
		}
}
</script>

<style lang="scss" scoped>
.list-container{
	display:flex;
	justify-content: space-between;
	align-items:flex-start;
	padding:0 24rpx;
	padding-top:30rpx;
	.list{
		width:calc(50% - 12rpx);
		display:flex;
		flex-direction:column;
		.item{
			margin-bottom:18rpx;
			image{
					width:100%;
					border-radius: 14rpx;
			}
			.desc{
				font-size:28rpx;
			}
		}
	}
	.post_r{
		position: relative;
	}
	.post_a{
		position: absolute;
		width: 100%;
		border-radius: 0 0 14rpx 14rpx;
		bottom: 8rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 14px;
		background-color: rgba(0,0,0,0.4);
		text-align: center;	
		color: #fff;
	}
	.post_a_top{
		position: absolute;
		border-radius: 8rpx;
		top: 30rpx;
		left: -10rpx;
		width: 52px;
		height: 22px;
		line-height: 22px;
		font-size: 14px;
		text-align: center;	
		color: #fff;
	}
	.end{
		background-color: #F4F4F4;
		color: #8D92A3;
	}
	.start{
		background-color: #FF5100;
	}
}
</style>